﻿@import "_reset.less";
html {
    font-size: 62.5%;
}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html {
        font-size: 70.3%;
    }
}

@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html {
        font-size: 73.24%;
    }
}

@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html {
        font-size: 75%;
    }
}

@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html {
        font-size: 78.125%;
    }
}

@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait) {
    html {
        font-size: 80.86%;
    }
}

@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait) {
    html {
        font-size: 84.375%;
    }
}

@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait) {
    html {
        font-size: 93.75%;
    }
}

@media screen and (min-width:640px) and (orientation:portrait) {
    html {
        font-size: 125%;
    }
}

#loading {
    position: fixed;
    z-index: 999999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    .tip {
        position: absolute;
        width: 100%;
        height: 0;
        left: 0;
        top: 50%;
        margin-top: -3vw;
        font-size: 6vw;
        color: #fff;
        text-align: center;
    }
}

.wrapper {
    position: relative;
    width: 100%;
    // overflow-y: auto;
    // overflow-x: hidden;
    overflow: hidden;
    .content{
        width: 100%;
        height: 100%;
    }
}
.arrow{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    width: 3.05rem;
    height: 1.9rem;
    margin-left: -1.525rem;
    background: url(../img/down.png) center 0 no-repeat;
    background-size: 100% 100%;
    @-webkit-keyframes downani{
        0%{
            bottom: 2rem;
        }
        50%{
            bottom: 0.5rem;
        }
        100%{
            bottom: 2rem;
        }
    }
    .animation(downani,1s,0s,linear);
    -webkit-animation-iteration-count: infinite;
}
.book-wrap{
    position: fixed;
    left: 50%;
    bottom: 3.75rem;
    width: 28.5rem;
    height: 4rem;
    margin-left: -14.1rem;
    background: url(../img/bookBg.png) 0 0 no-repeat;
    background-size: 100% 100%;
    .download{
        position: absolute;
        right: 0rem;
        width: 14rem;
        height: 3.5rem;
        background: url(../img/download.png) center 0 no-repeat;
        background-size: 100% 100%;
    }
    .bookBtn{
        position: absolute;
        left: 0rem;
        width: 14rem;
        height: 3.5rem;
        background: url(../img/bookBtn.png) center 0 no-repeat;
        background-size: 100% 100%;
    }
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    .opacity(0);
    .transition(all 1s 0s);
    &.active{
       .opacity(1);
    }
    .pagewrap{
        position: relative;
        width: 100%;
        height: 100%;
    }
}

.page1 {
    background: url(../img/page1.jpg) 0 0 no-repeat;
    .person1 {
        position: absolute;
        top: 3.75rem;
        width: 21.25rem;
        height: 18.85rem;
        background: url(../img/person1.png) 0 0 no-repeat;
        background-size: 100% 100%;
        opacity: 0;
        .transition(all 1s 0.5s);
    }
    &.active .person1 {
        opacity: 1;
    }
    .title1{
        position: absolute;
        top: 15.7rem;
        left: 50%;
        width: 17.55rem;
        height: 2.3rem;
        margin-left: -4.8rem;
        background: url(../img/page1_title1.png) center 0 no-repeat;
        background-size: 100% 100%;
        opacity: 0;
        .transition(all 1s 1s);
    }
    &.active .title1 {
        opacity: 1;
    }
    .person2 {
        position: absolute;
        top: 13rem;
        right: 0;
        width: 18.55rem;
        height: 22.65rem;
        background: url(../img/person2.png) center 0 no-repeat;
        background-size: 100% 100%;
        opacity: 0;
        .transition(all 1s 1.5s);
    }
    &.active .person2 {
        opacity: 1;
    }
    .title2{
        position: absolute;
        top: 25.15rem;
        left: 50%;
        width: 11.55rem;
        height: 2.3rem;
        margin-left: -10.8rem;
        background: url(../img/page1_title2.png) center 0 no-repeat;
        background-size: 100% 100%;
        opacity: 0;
        .transition(all 1s 2s);
    }
    &.active .title2 {
        opacity: 1;
    }
}

.page2 {
    background: url(../img/page2.jpg) 0 0 no-repeat;
    .item {
        position: absolute;
        right: -10rem;
        width: 100%;
        height: 100%;
        background: url(../img/movebg.png) center 0 no-repeat;
        background-size: 100% 100%;
        .opacity(0);
        .transition(all 1s 0s);
    }
    &.active .item {
        right: 0rem;
        .opacity(1);
    }
    .title {
        position: absolute;
        top: 20.5rem;
        left: 50%;
        width: 17rem;
        height: 2.5rem;
        margin-left: 1.4rem;
        background: url(../img/page2_title.png) center 0 no-repeat;
        background-size: 100% 100%;
        .opacity(0);
        .transition(all 1s 1s);
    }
    &.active .title {
        margin-left: -2.4rem;
        right: 0rem;
        .opacity(1);
    }
}

.page3 {
    background: url(../img/page3.jpg) 0 0 no-repeat;
    .title {
        position: absolute;
        top: 22.4rem;
        left: 50%;
        width: 7.45rem;
        height: 2.55rem;
        margin-left: -3.4rem;
        background: url(../img/page3_title.png) center 0 no-repeat;
        background-size: 100% 100%;
        .opacity(0);
        .transition(all 1s 0.5s);
    }
    &.active .title {
        margin-left: 0.4rem;
        right: 0rem;
        .opacity(1);
    }
}

.page4{
    width: 100%;
    height: 90rem;
    background: url(../img/page4.jpg) center 0 no-repeat;
    .topBar{
        position: fixed;
        width: 100%;
        height: 5rem;
        top: 0;
        background: url(../img/topBarBg.png) center 0 no-repeat;
        background-size: 100% auto;
        color: #fff;
        h2{
            position: absolute;
            top: 1rem;
            left: 8rem;
            font-size: 1.5rem;
        }
        span{
            position: absolute;
            top: 2.8rem;
            left: 8rem;
            font-size: 1.15rem;
        }
        .logo{
            position: absolute;
            top: 1rem;
            left: 1.7rem;
            width: 5.15rem;
            height: 5.15rem;
            background: url(../img/logo.png) center 0 no-repeat;
            background-size: 100% auto;
        }
        .shareBtn{
            position: absolute;
            top: 1rem;
            right: 1.7rem;
            width: 5.9rem;
            height: 3rem;
            background: url(../img/shareBtn.png) center 0 no-repeat;
            background-size: 100% auto;
        }
    }
    .videoBtn{
        position: absolute;
        top: 21rem;
        left: 50%;
        width: 4.35rem;
        height: 4.35rem;
        margin-left: -1.2rem;
        background: url(../img/videoBtn.png) center 0 no-repeat;
        background-size: 100% auto;

        @-webkit-keyframes videobtnani{
            0%{
                .scale(0.8);
            }
            50%{
                .scale(1);
            }
            100%{
                .scale(0.8);
            }
        }
        .animation(videobtnani,1s,0s,linear);
        -webkit-animation-iteration-count: infinite;
    }
    .bookWrap{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 6.5rem;
        background: #7d7d7d;
        .wrap{
            position: relative;
            left: 50%;
            top: 1.3rem;
            width: 28.5rem;
            height: 3.65rem;
            margin-left: -14.1rem;
        }
        .telNum{
            position: absolute;
            width: 19.4rem;
            height: 100%;
            text-align: center;
            border: 1px solid #fff;
            border-radius: 2px;
            font-size: 1.2rem;
            color: #444;
            background: #fff;
        }
        .bookBtn{
            position: absolute;
            right: 0;
            width: 9rem;
            height: 100%;
            background: url(../img/bookBtn.png) center 0 no-repeat;
            background-size: 100% 100%;
        }
    }
    .newsTitle{
        margin-top: 53.2rem;
        width: 100%;
        height: 4.4rem;
        line-height: 4.4rem;
        font-size: 1.7rem;
        color: #090d10;
        background: url(../img/newsTitleBg.png) center 0 no-repeat;
        background-size: 100% 100%;
        text-indent: 1.5rem;
    }
    .newsWrap{
        width: 100%;
        height: 20.5rem;
        ul{
            width: 100%;
            height: 100%;
            li{
                width: 28.6;
                height: 3.95rem;
                line-height: 3.95rem;
                padding: 0 1.7rem;
                font-size: 1.2rem;
                color: #666;
                a{
                    color: #666;
                }
                border-bottom: 1px solid #efefef;
                .newsDate{
                    float: right;
                }
            }
        }
    }
    .newsMoreBtn{
        width: 28.6rem;
        height: 3.85rem;
        margin: 0 auto;
        margin-top: 0.2rem;
        background: url(../img/moreIco.png) 60% center no-repeat;
        background-size: 100% 100%;
    }
}

.gw{
   position: absolute;
   width: 100%;
   height: 90rem;
   background: url(../img/page4.jpg) center 0 no-repeat;
   background-size: 100% auto !important;
   background-repeat: no-repeat !important;
   .opacity(0);
   .transition(all 1s 0s);
   &.active{
      .opacity(1);
   }
   .pagewrap{
       position: relative;
       width: 100%;
       height: 100%;
   }

   .topBar{
       position: fixed;
       width: 100%;
       height: 5rem;
       top: 0;
       background: url(../img/topBarBg.png) center 0 no-repeat;
       background-size: 100% auto;
       color: #fff;
       h2{
           position: absolute;
           top: 1rem;
           left: 8rem;
           font-size: 1.5rem;
       }
       span{
           position: absolute;
           top: 2.8rem;
           left: 8rem;
           font-size: 1.15rem;
       }
       .logo{
           position: absolute;
           top: 1rem;
           left: 1.7rem;
           width: 5.15rem;
           height: 5.15rem;
           background: url(../img/logo.png) center 0 no-repeat;
           background-size: 100% auto;
       }
       .shareBtn{
           position: absolute;
           top: 1rem;
           right: 1.7rem;
           width: 5.9rem;
           height: 3rem;
           background: url(../img/shareBtn.png) center 0 no-repeat;
           background-size: 100% auto;
       }
   }
   .videoBtn{
       position: absolute;
       top: 21rem;
       left: 50%;
       width: 4.35rem;
       height: 4.35rem;
       margin-left: -1.2rem;
       background: url(../img/videoBtn.png) center 0 no-repeat;
       background-size: 100% auto;

       @-webkit-keyframes videobtnani{
           0%{
               .scale(0.8);
           }
           50%{
               .scale(1);
           }
           100%{
               .scale(0.8);
           }
       }
       .animation(videobtnani,1s,0s,linear);
       -webkit-animation-iteration-count: infinite;
   }
   .bookWrap{
       position: fixed;
       bottom: 0;
       width: 100%;
       height: 6.5rem;
       background: #7d7d7d;
       .wrap{
           position: relative;
           left: 50%;
           top: 1.3rem;
           width: 28.5rem;
           height: 3.65rem;
           margin-left: -14.1rem;
       }
       .download{
               position: absolute;
               right: 0rem;
               width: 14rem;
               height: 3.5rem;
               background: url(../img/download.png) center 0 no-repeat;
               background-size: 100% 100%;
           }
           .bookBtn{
               position: absolute;
               left: 0rem;
               width: 14rem;
               height: 3.5rem;
               background: url(../img/bookBtn.png) center 0 no-repeat;
               background-size: 100% 100%;
           }
   }
   .newsTitle{
       margin-top: 53.2rem;
       width: 100%;
       height: 4.4rem;
       line-height: 4.4rem;
       font-size: 1.7rem;
       color: #090d10;
       background: url(../img/newsTitleBg.png) center 0 no-repeat;
       background-size: 100% 100%;
       text-indent: 1.5rem;
   }
   .newsWrap{
       width: 100%;
       height: 20.5rem;
       ul{
           width: 100%;
           height: 100%;
           li{
               width: 28.6;
               height: 3.95rem;
               line-height: 3.95rem;
               padding: 0 1.7rem;
               font-size: 1.2rem;
               color: #666;
               a{
                   color: #666;
               }
               border-bottom: 1px solid #efefef;
               .newsDate{
                   float: right;
               }
           }
       }
   }
   .newsMoreBtn{
       width: 28.6rem;
       height: 3.85rem;
       margin: 0 auto;
       margin-top: 0.2rem;
       background: url(../img/moreIco.png) 60% center no-repeat;
       background-size: 100% 100%;
   }
}

.pop{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    .fade{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;

    }
    .bookPop{
        position: absolute;
        width: 29.3rem;
        height: 50.8rem;
        top: 2rem;
        left: 50%;
        margin-left: -14.65rem;
        background: url(../img/bookPop.jpg) center 0 no-repeat;
        background-size: 100% 100%;
        text-indent: 1.5rem;
        .closePop{
            position: absolute;
            top: 1rem;
            left: 50%;
            margin-left: 10rem;
            width: 3rem;
            height: 3rem;
        }
        .passcard{
            position: absolute;
            top: 15rem;
            left: 0;
            width: 100%;
            height: 2.7rem;
            line-height: 2.7rem;
            font-size: 1.2rem;
            input{
                width: 19.1rem;
                height: 2.8rem;
                border: 1px solid #000;
                position: absolute;
                top: -2.7rem;
                right: 1.3rem;
                text-align: center;
            }
        }
        .telNumber{
            position: absolute;
            top: 23rem;
            left: 0;
            width: 100%;
            height: 2.7rem;
            line-height: 2.7rem;
            font-size: 1.2rem;
            input{
                width: 19.1rem;
                height: 2.8rem;
                border: 1px solid #000;
                position: absolute;
                top: -2.7rem;
                right: 1.3rem;
                text-align: center;
            }
        }
        .code{
            position: absolute;
            top: 34rem;
            left: 0;
            width: 100%;
            height: 2.7rem;
            line-height: 2.7rem;
            font-size: 1.2rem;
            input{
                width: 19.1rem;
                height: 2.8rem;
                border: 1px solid #000;
                position: absolute;
                top: -2.7rem;
                right: 1.3rem;
                text-align: center;
            }
        }
        .reg{
            position: absolute;
            top: 4.2rem;
            left: 50%;
            margin-left: 3rem;
            width: 10rem;
            height: 1.4rem;
        }
        .getCode{
            position: absolute;
            top: 28rem;
            right: 1.2rem;
            width: 8rem;
            height: 3.75rem;
            background: #5e5e5e;
            color: #fff;
            text-align: center;
            line-height: 3.75rem;
            text-indent: 0;
            font-size: 1.2rem;
        }
        .bookbtn{
            position: absolute;
            top: 40rem;
            left: 50%;
            width: 26.75rem;
            height: 3.55rem;
            margin-left: -13.375rem;
            background: #d7d6d7z;
            border: 1px solid #000;
            color: #000;
            text-align: center;
            line-height: 3.55rem;
            text-indent: 0;
            font-size: 1.7rem;
        }
        .gongzhong{
            position: absolute;
            bottom: 1.5rem;
            width: 26.9rem;
            height: 4.65rem;
            background: url(../img/gongzhong.png) center 0 no-repeat;
            background-size: 100% 100%;
        }
    }
}
.pop-share{
  position: absolute;
  top: 5rem;
  left: 0;
  width: 32rem;
  height: 6rem;
  background: #000;
  .opacity(0.5);
  display: none;
}
